<!--
 * @Author: your name
 * @Date: 2021-10-08 10:21:05
 * @LastEditTime: 2021-10-08 20:44:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dashboard\src\pages\government\components\Bottom1.vue
-->
<template>
  <div id="bottom1" style="height: 95%"></div>
</template>
<script>
import { Pie } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    myChart() {
      const data = [
        { type: "文学", value: 50 },
        { type: "语言", value: 20 },
        { type: "文字", value: 15 },
        { type: "艺术", value: 5 },
        { type: "其他", value: 5 },
      ];

      const piePlot = new Pie("bottom1", {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: "inner",
          offset: "-50%",
          content: "{value}",
          style: {
            textAlign: "center",
            fontSize: 14,
          },
        },
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
        ],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: "pre-wrap",
              overflow: "hidden",
              textOverflow: "ellipsis",
            },
            content: "",
          },
        },
      });

      piePlot.render();
    },
  },
  created() {},
  mounted() {
    this.myChart();
  },
};
</script>